<!DOCTYPE html>
<html lang="ch-CN">
<head>
  <meta charset="UTF-8">
  <title>原型对象>构造函数</title>
</head>
<style>
  body {
    width: 100%;
    height: 100vh;
    background-color: wheat;
    font-size: 30px;
    text-decoration: none;
    font-family: "华文楷体";
  }
</style>
<script>
  /*
      * 原型:prototype
      *
      * 创建的每一个函数,解析器都会向函数添加一个prototype属性
          - 这个属性对应着一个对象,这个对象就是所谓的原型对象
      * 普通函数没有prototype属性
      * 函数以构造函数调用时,它所创建的对象中都有一个隐含的属性
          - 指向该构造函数的原型对象,可以通过__proto__来访为该属性
      * 判断构造函数对象的原型对象是否与构造函数的原型对象相同 Person1.__proto__==Person.prototype
          - 如果相同说明同一个类(构造函数)的实例都可以访问到这个原型对象(地址相同),就可以实现方法共享等,而不浪费空间
   */
  function Person(name, age, gender) {
    this.name = name
    this.age = age
    this.gender = gender
    // this.sayName = function () {
    //     document.write("name:" + this.name + "age:" + this.age + "gender:" + this.gender + "<br>")
    // }
  }
  // 构造函数的原型对象
  console.log(Person.prototype)
  // 向构造函数的原型对象中添加sayName函数对象
  Person.prototype.sayName =function (){
    document.write("name:" + this.name + "age:" + this.age + "gender:" + this.gender + "<br>")
  }

  // Person的分类对象实例化
  let Person1 = new Person("小红", 20, "女")
  let Person2 = new Person("小兰", 30, "女")
  let Person3 = new Person("小紫", 26, "男")

  // 判断构造函数的原型对象是否与构造函数的原型对象相同
  document.write("判断构造函数的原型对象是否与构造函数的原型对象相同:<br>")
  document.write(Person1.__proto__==Person.prototype)
  document.write("<br><br>")

  Person1.sayName()
  Person2.sayName()
  Person3.sayName()
  // 控制台查看类别
  console.log(Person1)
  console.log(Person2)
  console.log(Person3)
  // 判断对象是否使用了同一个方法
  document.write("<br>判断对象Person1和Person2是否使用了同一个方法:<br>")
  document.write(Person1.sayName == Person2.sayName)
</script>
<body>
</body>
</html>